<template>
  <!-- 轮播图 -->
  <el-carousel :interval="4000" type="card" height="400px" class="carousel">
    <el-carousel-item v-for="(item, index) in bannerBooks" :key="index">
      <img :src="item.coverUrl" alt="carousel" class="carousel-img">
    </el-carousel-item>
  </el-carousel>
  <!-- 图书分类 -->
  <BookCategory></BookCategory> <!-- 新书推荐 -->
  <div class="section-title">新书推荐</div>
  <el-row :gutter="20" class="book-section">
    <el-col :span="6" v-for="(book, index) in newBooks" :key="index">
      <BookCard :book="book" />
    </el-col>
  </el-row>
  <!-- 热销图书 -->
  <div class=" section-title">推荐图书</div>
  <el-row :gutter="20" class="book-section">
    <el-col :span="6" v-for="(book, index) in recommendedBooks" :key="index">
      <BookCard :book="book" />
    </el-col>
  </el-row>
  <!-- 推荐书籍 -->
  <!-- <div class="section-title">推荐书籍</div>
  <el-row :gutter="20" class="book-section">
    <el-col :span="6" v-for="(book, index) in recommendedBooks" :key="index">
      <BookCard :book="book" />
    </el-col>
  </el-row> -->
</template>



<script setup>
import { onMounted, ref } from 'vue';
import { useBookStore } from '@/stores/book';
import BookCategory from '@/components/book/BookCategory.vue';
import BookCard from '@/components/book/BookCard.vue'; // 引入新组件
const bookStore = useBookStore();

// const carouselItems = ref([
//   { src: image1 },
//   { src: image2 },
//   { src: image3 }
// ])

const newBooks = ref([])
const bannerBooks = ref([])
const recommendedBooks = ref([])

onMounted(async () => {
  await bookStore.getBanner()
  await bookStore.getNew()
  await bookStore.getRecommend()
  newBooks.value = bookStore.newBooks
  bannerBooks.value = bookStore.bannerBook
  recommendedBooks.value = bookStore.recommendBooks

})

</script>



<style scoped>
.carousel {
  margin-bottom: 20px;
  /* background-color: #3b3b3b; */
  box-shadow: 0 0 145px #409eff;

}

.carousel-img {
  /* height: 400px; */
  width: 100%;
  height: 100%;
  /* border: 1px solid #2a2525; */
  /* background-color: #ffffff73; */
  box-shadow: 0 0 14px rgba(94, 95, 95, 0.3);
  object-fit: contain;
}

.el-button {
  margin: 5px 4px;
}

.section-title {
  font-size: 24px;
  font-weight: bold;
  margin: 20px auto;
  width: 60%;
  text-align: center;
  border-radius: 12px;
  background-color: rgb(181, 218, 255);
  box-shadow: 0 0 10px rgba(94, 95, 95, 0.3);
}

.book-section {
  background-color: rgb(248, 252, 254);
  overflow: hidden;
  padding: 20px 0;
}
</style>
